<template>
    <div class="gird_map">
        <div id="gird_map">

        </div>
    </div>
</template>

<script>
    export default {
        name: "GirdMap",
        data(){
          return{
            map:{},
            data:[],
          }
        },
        mounted(){
           this.loadmap();
        },
        methods:{

          openInfoWindow(id){
            console.log('单击了网格地图的上的人员：',id);
          },


          loadmap(){
            let that = this;

            let lay;
            let imageURL = "https://t0.tianditu.gov.cn/img_w/wmts?" +
              "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
              "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=167e18cef89faa2c9c56fed75e46b7b5";
            //创建自定义图层对象
            lay = new T.TileLayer(imageURL, {minZoom: 1, maxZoom: 18});
            var config = {
              layers: [lay],
              showLabel: true,
              color: "#effdfb", weight: 3, opacity: 0.5, fillColor: "#effdfb", fillOpacity: 0.5
            };



            let map =new T.Map("gird_map",config);
            that.map = map;
            //设置显示地图的中心点和级别
            let jwd = that.$util.storage.get("jwd");
            jwd = jwd.split(",");
            map.centerAndZoom(new T.LngLat(jwd[0], jwd[1]), 15);

            //允许鼠标双击放大地图
            map.enableScrollWheelZoom();

            // 颜色定义
            // let area_color = ["#df1a1a","#8058ff","#69d5dd","#2b95ff","#02c070","#43e800","#9138ff","#a6c152","#3abfc4","#d5e025","#e0b225","#e025bf"];
            let area_color = ["#df1a1a","#8058ff","#69d5dd","#2b95ff","#02c070","#43e800","#9138ff","#a6c152","#3abfc4","#d5e025","#e0b225","#e025bf","#e02581","#e02555","#e02529","#a525e0","#25e0bf","#25e074","#bfe025","#8fe025","#d9e025"];

            that.$http.get("api/GriderPcApi/getGridList?vollege_id="+that.$util.vollege_id,null,r=>{
              // console.log("地图信息：",r.data);
              that.data = r.data;
              let centerArr = [];
              let centerPoints = [];
              // 绘制网格长地图数据
              for (var i = 0; i <= that.data.length - 1; i++) {

                let bigPoint = that.data[i];

                let color = area_color[i];

                for (var j = 0; j <= that.data[i].area_arr.length - 1; j++) {

                  let pointW = that.data[i].area_arr[j];
                  let points = [];

                  let center = new T.LngLat(pointW.center_n, pointW.center_t);

                  centerPoints.push(center);

                  let points_arr = pointW.area_arr;

                  //向地图上添加面
                  for (var k = 0; k <= points_arr.length - 1; k++) {
                    let point = points_arr[k];
                    let p = new T.LngLat(point[0], point[1]);
                    centerPoints.push(p);
                    points.push(p);

                  }

                  console.log("POINTS", points);

                  //创建面对象
                  let polygon = new T.Polygon(points, {
                    color: color, weight: 2, lineStyle: "dashed", opacity: 1, fillColor: color, fillOpacity: 0.4
                  });
                  map.addOverLay(polygon);

                  let headimg = new T.Icon({
                    iconUrl: bigPoint.grider.pic?bigPoint.grider.pic:"/static/headimg.png",
                    iconSize: new T.Point(34, 34),
                    iconAnchor: new T.Point(17, 48)
                  });
                  let marker = new T.Marker(center, {icon: headimg});
                  map.addOverLay(marker);

                  centerArr.push(center);
                  let main_id = bigPoint.main_id;
                  marker.addEventListener("click", function () {
                    that.openInfoWindow(main_id);
                  });

                  // //弹出框信息
                  let infoWin = new T.InfoWindow();
                  infoWin.setLngLat(center);
                  let content =
                    "<div style='padding:13px 19px;'>" +
                    "<div>"+bigPoint.title+"：" + bigPoint.grider.name +
                    "</div>" +
                    "</div>";
                  infoWin.setContent(content);
                  map.addOverLay(infoWin);


                  // // 弹出信息
                  polygon.main_id = main_id; // 网格长ID
                  polygon.removeEventListener("click", this.PolygonClick);
                  polygon.addEventListener("click", this.PolygonClick);

                }
              }

              map.setViewport(centerPoints);

              var ctrl = new T.Control.MapType([
                {
                  title: "卫星混合",
                  icon:
                    "http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellitepoi.png",
                  layer: TMAP_HYBRID_MAP
                },
                {
                  title: "地图", //地图控件上所要显示的图层名称
                  icon: "http://api.tianditu.gov.cn/v4.0/image/map/maptype/vector.png", //地图控件上所要显示的图层图标（默认图标大小80x80）
                  layer: TMAP_NORMAL_MAP //地图类型对象，即MapType。
                },

              ]);

              that.map.addControl(ctrl);


            });


          },//加载天地图

        },




    }
</script>

<style scoped>
  .gird_map{
    height: 453px;
    width: 735px;
    background: rgba(255,0,0,0.2);
  }
  #gird_map{
    height: 453px;
    width: 735px;
  }
  /*#gird_map >>> img{*/
    /*margin-top: 2px !important;*/
  /*}*/
  #gird_map >>>.tdt-infowindow-tip-container {
    background-image: url("/static/marker.png");
  }

  #gird_map >>>.tdt-infowindow-tip-container{
    width: 45px;
    height: 73px;
  }

  #gird_map >>> .tdt-marker-pane{
    z-index: 1000;
  }

  #gird_map >>> .tdt-marker-icon{
    border-radius: 25px;
  }

  #gird_map >>> .tdt-infowindow-close-button{
    display: none;
  }

  #gird_map >>> .tdt-infowindow-content{
    margin: 0px!important;
  }
  #gird_map >>> .tdt-infowindow-content-wrapper, .tdt-infowindow-tip{
    border-radius: 8px;
  }


</style>
